@import "/old/common/css/base";
body{
  font-size: 0;
}
.page-content{
  background: url("/src/imagesages/beauty/bg.jpg") repeat;
  background-size: rem(375px);
}
.head-img{
  width:100%;
}
.head-button{
  font-size: 0;
  a{
    cursor: pointer;
    display: inline-block;
    width: rem(145px);
    height: rem(49.5px);
    margin:0 rem(37.5px) 0 rem(25px);
    background: url("/src/imagesages/beauty/activity-join.png");
    background-size: rem(145px);
  }
  a:last-child{
    margin: 0;
    background: url("/src/imagesages/beauty/activity-detail.png");
    background-size: rem(145px);
  }
}
.rank{
  margin-top: rem(32.5px);
  width: 100%;
}
.list {
  padding-bottom: rem(30px);
}
.list-item{
  position: relative;
  width: rem(330px);
  margin: rem(20px) auto;
  background-color: #fff;
  box-sizing: border-box;
  border: rem(2.5px) solid black;
  border-radius: rem(5px);
  padding: rem(8px);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  .player-avatar {
    width: 100%;
    height: rem(206px);
    img {
      width: 100%;
      height: 100%
    }
  }
  p {
    padding: rem(10px) 0;
    color: #000;
    font-size: rem(14px);
    border-bottom: 1px solid #bdbdbd;
    word-break: break-all;
    line-height: 1rem;
    @include displayflex;
    @include flexflowRow();
    span {
      width: rem(40px);
      &:last-child {
        @include flex(1);
      }
    }
  }
  .star-count {
    margin-top: rem(10px);
    height: rem(30px);
    line-height: rem(30px);
    color: #000;
    font-size: rem(16px);
    .player-rank {
      float: right;
      color: #000;
      font-size: rem(16px);
      img {
        vertical-align: text-bottom;
        width: rem(23px);
        height: rem(23px);
      }
    }
  }
  .btn-group {
    height: rem(50px);
    a {
      margin: rem(14px);
      border: none;
      width: rem(120px);
      height: rem(32px);
      line-height: rem(32px);
      float: left;
      font-size: rem(18px);
      color: #000;
      background: url(/old/images/beauty/btn-bg.png) no-repeat center;
      background-size: contain;
      font-weight: 500;
      text-align: center;
    }
  }
  .border-bottom {
    position: absolute;
    left: rem(-2.5px);
    right: 0;
    bottom: rem(-10px);
    width: rem(330px);
    img {
      width: 100%;
    }
  }
}
.confirm-content{
  width: rem(255px);
  height:rem(255px);
  margin-left: rem(-127.5px);
  border-radius: rem(255px);
  background: url("/src/imagesages/beauty/confirm_bg.png");
  background-size: rem(255px);
  position: relative;
  .confirm-inner{
    padding: 0 rem(25px);
  }
  .confirm-title{
    position: absolute;
    top:50%;
    left:50%;
    width: 100%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    color: white;
    font-size: rem(24px);
    word-break: break-all;
    padding: 0 rem(24px);
  }
  .confirm-buttons{
    position: absolute;
    border: rem(1px) solid black;
    width: rem(35px);
    height:rem(35px);
    border-radius: rem(100px);
    background-color: white;
    color:black;
    left:5.7rem;
    top:-.8rem;
    span{
      line-height: rem(35px);
      height:rem(35px);
    }
  }
}
.infinite-scroll-preloader{margin-top:1rem}.infinite-scroll-preloader{margin:.5rem;text-align:center}.infinite-scroll-preloader .preloader{width:1.5rem;height:1.5rem}.infinite-scroll-preloader{height:2rem;line-height:2rem;text-align:center;font-weight:700;font-size:.6rem;color:black;width:6rem;margin:0 auto}.infinite-scroll-preloader .pullUpIcon{display:block;float:left;width:1rem;height:.5rem;background:url(/old/images/loading-logo.png) 0 0 no-repeat;background-size:100%;margin-top:.7rem;-webkit-transform:rotate(-180deg) translateZ(0)}.infinite-scroll-preloader.flip .pullUpIcon{-webkit-transform:rotate(0) translateZ(0)}